<!-- 出入库流水 -->
<template>
  <div class="container-ymm">
    <div class="header-ymm">
      <el-select v-model="listQuery.classification" placeholder="业务分类" class="seach-select" size="small">
        <el-option v-for="item in listQuery.type_options" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-select v-model="listQuery.accessType" placeholder="类型" class="seach-select" size="small">
        <el-option v-for="item in listQuery.status_options" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-input v-model="listQuery.keyword" type="text" class="seach-input " size="small" placeholder="输入记录单号、SKU查询">
        <i slot="prefix" class="el-input__icon el-icon-search"/>
      </el-input>
      <el-button class="greenbt" size="small" @click="getList()">查询</el-button>
    </div>
    <div class="table-ymm">
      <el-table v-model="isloading" :data="tableData" style="width: 100%" height="450" border highlight-current-row>
        <el-table-column label="分类" width="80">
          <template slot-scope="scope">
            <span >{{ scope.row.classification == 1 ? "仓库发货" :
            scope.row.classification == 2 ? "调拨出库" :
            scope.row.classification == 3 ? "调拨入库":
            scope.row.classification == 4 ? "网批发货" :
            scope.row.classification == 7 ? "盘点" :
            scope.row.classification == 6 ? "采购收货" : "其他出入库" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="80">
          <template slot-scope="scope">
            <span >{{ scope.row.accessType == 1 ? "出库" : "入库" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="仓库" width="80">
          <template slot-scope="scope">
            <span >{{ scope.row.warehouseName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SKU名称" width="300">
          <template slot-scope="scope">
            <span >{{ scope.row.skuName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SKU编码" width="120">
          <template slot-scope="scope">
            <span >{{ scope.row.skuCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="80">
          <template slot-scope="scope">
            <span >{{ scope.row.accessType == 1 ? scope.row.outAmount : scope.row.inAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="业务单号" width="150">
          <template slot-scope="scope">
            <span >{{ scope.row.businessNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="时间" width="180">
          <template slot-scope="scope">
            <span >{{ dateFormat(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table-ymm-bt">
      <el-pagination
        v-show="total>0"
        :current-page="listQuery.page"
        :page-sizes="[30,50,100,500]"
        :page-size="listQuery.pageSize"
        :total="total"
        background
        layout="sizes, prev, pager, next,total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <component :is="modal" :modal-data="modalData" @close="closeChild"/>
  </div>
</template>
<script>
import { getAccessRecord } from '@/api/pas/logs'
export default{
  data() {
    return {
      isloading: true,
      modal: null, modalData: {},
      listQuery: {
        accessType: '', status_options: [],
        classification: '', type_options: [],
        keyword: '',
        pageNumber: null,
        page: 1,
        pageSize: 30
      },
      total: 1,
      tableData: []
    }
  },
  mounted() {
    this.listQuery.status_options = [
      { label: '类型', value: '' },
      { label: '出库', value: 1 },
      { label: '入库', value: 2 }
    ]

    this.listQuery.type_options = [
      { label: '业务分类', value: '' },
      { label: '仓库发货', value: 1 },
      { label: '调拨出库', value: 2 },
      { label: '调拨入库', value: 3 },
      { label: '网批发货', value: 4 },
      { label: '其他出入库', value: 5 },
      { label: '采购收货', value: 6 },
      { label: '盘点', value: 7 }
    ]

    this.getList()
  },
  methods: {
    getList() {
      this.listQuery.pageNumber = (this.listQuery.page - 1) * this.listQuery.pageSize
      getAccessRecord(this.listQuery).then(res => {
        console.warn(res)
        if (res.data.data) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
          this.isloading = false
        }
      })
    },

    // 分页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    closeChild() {
      this.modal = null
    },
    // 格式化时间戳
    dateFormat(time) {
      var date = new Date(time)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
      var h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':'
      var m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':'
      var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return Y + M + D + h + m + s
    }

  }
}
</script>

<style>
   body{
     background-color: #ffffff;
   }
    /*表格头部颜色*/
  .el-table__header thead  tr th{
      background-color: #edf4f9;
  }
  /*表格字体*/
  .el-table tr {
      font-size: 12px;
  }
  /*表格行高*/
  .el-table .cell{
    line-height: 1.2;
  }
  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
     background-color: #D7FFD7 !important;
    /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #D7FFD7;
    /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
  }

</style>
